<script setup>
import useDetailStore from '@/stores/modules/detail'
import { useRoute, useRouter } from 'vue-router'
import DetailSwipe from './components/detail-swipe.vue'
import DetailInfos from './components/detail-infos.vue'
import DetailFacility from './components/detail-facility.vue'
import DetailLandlord from './components/detail-landlord.vue'
import DetailComment from './components/detail-comment.vue'
import DetailNotice from './components/detail-notice.vue'
import DetailIntro from './components/detail-intro.vue'
import DetailMap from './components/detail-map.vue'
import DetailBar from './components/detail-bar.vue'

// 接收路径参数（房屋id）
const route = useRoute()
const houseId = route.query.houseId

// 点击返回上一面
const router = useRouter()
const onClickLeft = () => {
  router.back()
}

// 请求数据
const detailStore = useDetailStore()
detailStore.getDetailInfoAction(houseId)
</script>

<template>
  <div class="detail">
    <!-- 1.导航栏 -->
    <van-nav-bar title="房屋详情" left-text="旅途" left-arrow @click-left="onClickLeft" />
    <!-- 2.轮播图 -->
    <DetailSwipe />
    <van-tabs
      v-model:active="active"
      scrollspy
      sticky
      title-active-color="#ff9854"
      title-inactive-color="#000"
    >
      <van-tab title="描述">
        <!-- 3.房屋描述 -->
        <DetailInfos />
      </van-tab>
      <van-tab title="设施">
        <!-- 4.房屋设施 -->
        <DetailFacility />
      </van-tab>
      <van-tab title="房东">
        <!-- 5.房东简介 -->
        <DetailLandlord />
      </van-tab>
      <van-tab title="评论">
        <!-- 6.热门评论 -->
        <DetailComment />
      </van-tab>
      <van-tab title="周边">
        <!-- 7.周边位置 -->
        <DetailMap />
      </van-tab>
      <van-tab title="须知">
        <!-- 8.预定须知 -->
        <DetailNotice />
      </van-tab>
    </van-tabs>

    <!-- 8.价格说明 -->
    <DetailIntro />
    <!-- 9.底部信息 -->
    <div class="footer">
      <img src="@/assets/img/detail/icon_ensure.png" alt="" />
      <div class="text">Sokach旅途, 永无止境!</div>
    </div>
    <!-- 10.订购模块 -->
    <DetailBar />
  </div>
</template>

<style lang="less" scoped>
.detail {
  height: 100vh;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-bottom: 60px;
  :deep(.van-nav-bar__title) {
    font-size: 16px;
    font-weight: 400;
    color: #ff9645;
  }
  --van-nav-bar-icon-color: #ff9645;
  --van-nav-bar-text-color: #ff9645;
  --van-tabs-bottom-bar-color: #ff9645;

  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 150px;

    img {
      width: 123px;
    }

    .text {
      margin-top: 12px;
      font-size: 12px;
      color: #7688a7;
    }
  }
}
</style>
